<template>
  <div>
    <el-divider content-position="left" class="divider_text">
      <!-- 标题插槽 -->
      <slot></slot>
    </el-divider>
    <ul class="image-list clear" v-if="images != null && images != ''">
      <!-- 内饰图列表渲染 -->
      <li v-for="(item, index) in images" v-bind:key="item.id">
        <div class="image-item-image">
          <el-image
            class="image-image"
            :src="item.image_url"
            :preview-src-list="previewList"
            lazy
          >
          </el-image>
          <div class="image-title-mask">
            <svg
              class="icon image-del"
              aria-hidden="true"
              @click="delImage(index)"
            >
              <use xlink:href="#icon-trash" />
            </svg>
            <div class="image-title-mask-bg" :title="item.title">
              {{ item.title }}
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div v-else class="notfund">
      <span>暂无该车款图片</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["images", "previewList", "title"],
  data() {
    return {};
  },
  methods: {
    //删除图片
    delImage(index) {
      console.log(index);
      this.$emit("delImage", index);
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.divider_text {
  div {
    font-size: 15px;
    font-weight: 600;
  }
}
.image-list {
  width: 100%;
  margin-top: 15px;
  li {
    float: left;
    width: 19%;
    max-height: 150px;
    max-width: 266px;
    margin-left: 1%;
    margin-bottom: 10px;
    .image-item-image {
      position: relative;
      background: #ff2200;
      /*cursor: pointer;*/
      .image-image {
        position: relative;
        display: inline-block;
        overflow: hidden;
        width: 100%;
        vertical-align: top;
      }
      .image-title-mask {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 30px;
        display: none;
        .image-del {
          position: absolute;
          right: 8px;
          bottom: 5px;
          width: 20px;
          height: 20px;
          margin: auto;
          color: #ffffff;
          z-index: 99;
          cursor: pointer;
        }
        .image-del:hover {
          color: #ff1515;
        }
        .image-title-mask-bg {
          width: 100%;
          height: 100%;
          background-color: #000;
          opacity: 0.6;
          color: white;
          line-height: 30px;
          padding-left: 5px;
          padding-right: 50px;
          font-size: 13px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .image-item-image:hover {
      .image-title-mask {
        display: block;
      }
    }
    .image-title {
      display: inline-block;
      font-size: 13px;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      padding: 3px 10px;
    }
  }
}

.clear::after {
  content: "";
  display: table;
  clear: both;
}
.notfund {
  margin-top: 8%;
  margin-bottom: 8%;
  font-size: 1rem;
  text-align: center;
  color: #808080;
}
.title {
  color: #ff4e4e;
  font-size: 18px;
}
/deep/.el-image-viewer__mask {
  opacity: 0.6;
}
/deep/.el-image-viewer__close, /deep/.el-image-viewer__btn {
  font-size: 24px;
  color: #fff;
  background-color: #bbb;
  transition: all 0.4s ease;
  opacity: 0.9;
  i{
    color:#000;
    font-weight: 500;
  }
  &:hover{
  background-color: #fff;
  }
}
/deep/.el-icon-circle-close:before{
    content: "\e6db";
}
</style>